<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dialog组件</title>

  <style>
    .container {
      max-width: 800px;
      margin: 30px auto;
      border-radius: 4px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
      padding: 16px;
    }

    .dialog {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.3);
      display: none;
      opacity: 0;
      transition: all .3s;
    }

    .dialog.show {
      display: block;
    }

    .dialog.appear {
      opacity: 1;
    }

    .dialog .main {
      width: 60%;
      background: #fff;
      margin: 30px auto;
      padding: 16px;
      border-radius: 6px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
      transform: translateY(-100%);
      opacity: 0;
      transition: all .3s;
    }

    .dialog.appear .main {
      transform: translateY(40px);
      opacity: 1;
    }

    .dialog .header {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }

    .dialog .header .close {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      outline: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      background: #fff;
    }

    .dialog .header .close::before,
    .dialog .header .close::after {
      content: '';
      position: absolute;
      display: block;
      width: 10px;
      height: 1px;
      background: #333;
      transform: rotate(45deg);
    }

    .dialog .header .close::after {
      transform: rotate(135deg);
    }

    .dialog .footer {
      display: flex;
      justify-content: flex-end;
    }

    .dialog .footer .button {
      margin-left: 10px;
    }

  </style>
</head>
<body>
  <div class="container">
    <h2>Dialog</h2>
    <button class="button open-dialog">打开弹窗</button>
    <div class="dialog">
      <div class="main">
        <div class="header">提示 <button class="close"></button></div>
        <div class="content">
          <p>这是一段消息</p>
        </div>
        <div class="footer">
          <button class="button btn-cancel">取消</button>
          <button class="button primary btn-ok">确定</button>
        </div>
      </div>
    </div>
  </div>
  <script>
    class Dialog {
      //设置options对象主要是需要对取消按钮跟确定按钮进行一个统一管理
      constructor($root, options = {}) {
        this.$root = $root
        this.options = options
        //判断onCancel是否有值 没有则返回一个空函数
        this.oncCancel = options.oncCancel || function() {}
        this.onOk = options.onOk || function() {}

        this.bind()
      }
      bind() {
        let self = this
        this.$root.querySelector('.close').onclick = function() {
          self.hide()
          self.oncCancel()
        }
        this.$root.querySelector('.btn-cancel').onclick = function() {
          self.hide()
          self.oncCancel()
        }
        this.$root.querySelector('.btn-ok').onclick = function() {
          self.hide()
          self.onOk()
        }
      }
      hide() {
        //这里如果不设置setTimeout他们的动画效果就出不来，因为他们会同时进行。
        this.$root.classList.remove('appear')
        setTimeout(() => {
          this.$root.classList.remove('show')
        }, 400);
        
      }
      show() {
        this.$root.classList.add('show')
        setTimeout(() => this.$root.classList.add('appear'))
        
      }
    }
    let dialog = new Dialog(document.querySelector('.dialog'),{
      onOk() {
        console.log('用户点了ok')
      },
      oncCancel() {
        console.log('用户点了取消')
      }
    })
    document.querySelector('.open-dialog').onclick = function() {
      dialog.show()
    }
    
  </script>
</body>
</html>